// Loading information to home.php
var walk;

function init() 
{
  // Populate badge
  // retrieveUserInfo("1442479765");
  retrieveUserInfo(document.getElementById('userID').value);
  
	// Load the waks from database
	retrieveWalks();
}

// Load the trails in the begining
function retrieveWalks() 
{
  var request = GXmlHttp.create();
  request.open('GET', 'mapHome.php', true);
  request.onreadystatechange = function() 
  {
    if (request.readyState == 4) 
    {
      xmlDoc = request.responseXML;
      if(xmlDoc != null)
      {
        walks = xmlDoc.documentElement.getElementsByTagName("walk");
        
        // Populate two trails for locality
        if(walks.length > 1)
        {
          // Generate random number
          var i = 0;
          addLocalityWalk(walks[i].getAttribute("id"),walks[i].getAttribute("title"), walks[i].getAttribute("walkDesc"), walks[i].getAttribute("pntCnt"), walks[i].getAttribute("center"), walks[i].getAttribute("pnts"), walks[i].getAttribute("desc"), walks[i].getAttribute("photo"), walks[i].getAttribute("rtng"), walks[i].getAttribute("views"), walks[i].getAttribute("favs"), walks[i].getAttribute("place"), walks[i].getAttribute("state"), walks[i].getAttribute("zip"), walks[i].getAttribute("weather"), walks[i].getAttribute("location"), walks[i].getAttribute("slope"), "1");
          i = 1;
          addLocalityWalk(walks[i].getAttribute("id"), walks[i].getAttribute("title"), walks[i].getAttribute("walkDesc"), walks[i].getAttribute("pntCnt"), walks[i].getAttribute("center"), walks[i].getAttribute("pnts"), walks[i].getAttribute("desc"), walks[i].getAttribute("photo"), walks[i].getAttribute("rtng"), walks[i].getAttribute("views"), walks[i].getAttribute("favs"), walks[i].getAttribute("place"), walks[i].getAttribute("state"), walks[i].getAttribute("zip"), walks[i].getAttribute("weather"), walks[i].getAttribute("location"), walks[i].getAttribute("slope"), "2");
        }
          
        // Populate the last divs
        var tempHTML = '';  
        for (var i = 0; i < 6 && i < walks.length; i++) 
        {
          tempHTML += addReccoWalk(walks[i].getAttribute("id"), walks[i].getAttribute("title"), walks[i].getAttribute("pntCnt"), walks[i].getAttribute("center"), walks[i].getAttribute("pnts"));
        }
        document.getElementById('recommendedPhotos').innerHTML = tempHTML;
        
        jQuery("div#scrollable1").scrollable().reload().end();
        jQuery("div#scrollable1").scrollable().reload().begin(3000);
        
        jQuery("div#scrollable2").scrollable().reload().end();
        jQuery("div#scrollable2").scrollable().reload().begin(3000);
        
        //jQuery("div#scrollable3").scrollable().reload().end();
        //jQuery("div#scrollable3").scrollable().reload().begin(8000);
      }
      else
        alert('Error Loading Data from File! Please try again..');
    } 
  }
  request.send(null);
}

function addLocalityWalk(id, title, walkDesc, pntCnt, center, pnt, desc, photo, rtng, views, favs, place, state, zip, weather, location, slope, elementID) 
{
  var latlng;
  var pnts = pnt.split(",");
  var descs = desc.split(",");
  var photos = photo.split(",");
  var idx = 0;
	var idxPrint = 0;
  var latlngs = [];
  var latlngsPrint =[];
  var marker;
  
  var printImage = 'http://maps.google.com/maps/api/staticmap?center=' + center + '&zoom=14&size=400x400&maptype=roadmap&format=png&path=color:0x0000ff|weight:5';
  for(i=0; i<pntCnt; i++)
  {
    latlngsPrint[i] = new GLatLng(pnts[idxPrint], pnts[idxPrint+1], true);
    printImage += '|' + pnts[idxPrint] + ',' + pnts[idxPrint+1];
    idxPrint = idxPrint + 2;
  }  
  printImage += '&sensor=false&key=ABQIAAAA9k26g8XMhjW26puIcLupsBRBbvhE4ZnyWZrWL-s_bP6LnlCf_xS0mtQsuv4_V89DnPAqoqRqdCCiTQ';
  document.getElementById("printSrc"+elementID).value= printImage;


  // construct polyline and static map
  var img = 'http://maps.google.com/maps/api/staticmap?center=' + center + '&zoom=14&size=180x180&maptype=roadmap&format=png&path=color:0x0000ff|weight:5';
  for(i=0; i<pntCnt; i++)
  {
    latlngs[i] = new GLatLng(pnts[idx], pnts[idx+1], true);
    img += '|' + pnts[idx] + ',' + pnts[idx+1];
    idx = idx + 2;
  }  
  img += '&sensor=false&key=ABQIAAAA9k26g8XMhjW26puIcLupsBRBbvhE4ZnyWZrWL-s_bP6LnlCf_xS0mtQsuv4_V89DnPAqoqRqdCCiTQ';
  
  document.getElementById('walkPreview'+elementID).src = img;
  document.getElementById('walkPreviewLink'+elementID).href = "walks.php?id="+id;
  
  var walkLink = "http://apps.facebook.com/shareawalk/walks.php?id="+id;
  //Share button
  var functionToCall = "showfeed('" + title + "','" + walkDesc + "','" + walkLink + "','"+ img + "')";  
  document.getElementById('share'+elementID).setAttribute('onClick', functionToCall);
  
  //Invite button
  // Get city and state from data
  place += ", " + state;
  functionToCall = "eventInvite('" + title + "','" + walkDesc + "','" + walkLink + "','" + place + "','" + place + "')" ;
  document.getElementById('invite'+elementID).setAttribute('onClick', functionToCall);
  
  var walk = new GPolyline(latlngs, "#ff0000", 4);
  
  // Set the info of walk
  // Title
  document.getElementById('title'+elementID).innerHTML = '<div onMouseOver="this.style.textDecoration=\'underline\';" onMouseOut="this.style.textDecoration=\'none\';"><h3 style="margin-top:-5px;"><a href="walks.php?id=' + id +'">' + title + '</a></h3></div>';
  
  // Description
  var tempHTML = '<table align="center"><tbody><tr><td valign="top" style="height:60px;"> ';
  tempHTML += walkDesc + '</td></tr><tr><td><table><tbody><tr><td>'; 
  rtng = Math.round(rtng);
  
  // Rating, Lenght and Location
  var title = new Array();
  title[0] = 'Not Rated'
  title[1] = 'Very Bad';
  title[2] = 'Bad';
  title[3] = 'Good';
  title[4] = 'Very Good';
  title[5] = 'Excellent!';
  tempHTML += '<div id="rateMe"  >';
  
  for(i = 1; i <= 5; i++)
  {
    if(i <= rtng)
      tempHTML += '<a id="star_' + i + '" class="on" onMouseOver="Tip(\'' + title[i] + '\');" onMouseOut="UnTip();"></a>';
    else
      tempHTML += '<a id="star_' + i + '" onMouseOver="Tip(\'' + title[i] + '\');" onMouseOut="UnTip();"></a>';
  }
  tempHTML += '</div>';
  tempHTML += '</td><td>Length: ' + (walk.getLength() * 0.000621371192).toFixed(2) + ' mi </td><td> Location: ' + zip + '</td></tr></tbody></table></td></tr></tbody></table>';
  document.getElementById('description'+elementID).innerHTML = tempHTML;
 
  // Photos
  tempHTML = '';
  for(var i = 0; i < photos.length; i++)
    if(photos[i] != '')
      tempHTML += '<img src="' + photos[i] + '" />';
  document.getElementById('photos'+elementID).innerHTML = tempHTML;
  
  // Friend Feeds
  tempHTML = '<table align="left" valign="top"><tbody><tr style="height:10px;"><td>Friends Vistied:</td><td>10</td><tr><td>Friends Favorited: </td><td>7</td></tr></tbody></table>';
  document.getElementById('friendInfo'+elementID).innerHTML = tempHTML;
  
  // Properties
  tempHTML = 'Properties<table align="center"><tr>';
  //tempHTML = 'weather ';
  switch(weather)
  {
    // Sunny
    case "0":
      tempHTML += '<td><img src="images/tagSun.png" width=24 height=24 onmouseover="Tip(\'Weather - Sun Safe\');this.src=\'images/tagSun2.png\';" onmouseout="UnTip();this.src=\'images/tagSun.png\';" style="margin-right:10px;margin-left:10px;"/></td>';
      break;
    // Snow Safe  
    case "1":
      tempHTML += '<td><img src="images/tagSnow.png" width=24 height=24 onmouseover="Tip(\'Weather - Snow Safe\');this.src=\'images/tagSnow2.png\';" onmouseout="UnTip();this.src=\'images/tagSnow.png\';" style="margin-right:10px;margin-left:10px;"/></td>';
      break;
    // Rain Safe  
    case "2":
      tempHTML += '<td><img src="images/tagRain.png" width=24 height=24 onmouseover="Tip(\'Weather - Rain Safe\');this.src=\'images/tagRain2.png\';" onmouseout="UnTip();this.src=\'images/tagRain.png\';" style="margin-right:10px;margin-left::10px;"/></td>';
      break;
  }
  
  //tempHTML += ' location ';
  switch(location)
  {
    // Downtown
    case "0":
      tempHTML += '<td><img src="images/tagCity.png" width=24 height=24 onmouseover="Tip(\'Location - City\');this.src=\'images/tagCity2.png\';" onmouseout="UnTip();this.src=\'images/tagCity.png\';" style="margin-right:10px;"/></td>';
      break;
    // Sub Urban
    case "1":
      tempHTML += '<td><img src="images/tagSubUrban.png" width=24 height=24 onmouseover="Tip(\'Location - Sub Urban\');this.src=\'images/tagSubUrban2.png\';" onmouseout="UnTip();this.src=\'images/tagRain.png\';" style="margin-right:10px;"/></td>';
      break;
    // Scenic  
    case "2":
      tempHTML += '<td><img src="images/tagScenic.png" width=24 height=24 onmouseover="Tip(\'Location - Nature\');this.src=\'images/tagScenic2.png\';" onmouseout="UnTip();this.src=\'images/tagRain.png\';" style="margin-right:10px;"/></td>';
      break;
  }
  
  //tempHTML += ' terrain ';
  switch(slope)
  {
    // Plains
    case "0":
      tempHTML += '<td><img src="images/tagPlain.png" width=24 height=24 onmouseover="Tip(\'Slope - Plains\');this.src=\'images/tagPlain2.png\';" onmouseout="UnTip();this.src=\'images/tagPlain.png\';"/></td>';
      break;
    // Gentle Slope
    case "1":
      tempHTML += '<td><img src="images/tagGentle.png" width=24 height=24 onmouseover="Tip(\'Slope - Gentle Slope\');this.src=\'images/tagGentle2.png\';" onmouseout="UnTip();this.src=\'images/tagGentle.png\';"/></td>';
      break;
    // Rugged
    case "2":
      tempHTML += '<td><img src="images/tagRugged.png" width=24 height=24 onmouseover="Tip(\'Slope - Rugged\');this.src=\'images/tagRugged2.png\';" onmouseout="UnTip();this.src=\'images/tagRugged.png\';"/></td>';
      break;
  }
  tempHTML += '</tr></table>';
  document.getElementById("tagInfo"+elementID).innerHTML = tempHTML;

}

function addReccoWalk(id, title, pntCnt, center, pnt) 
{
  var latlng;
  var pnts = pnt.split(",");
  var idx = 0;
  var latlngs = [];
  
  // construct polyline and static map
  var img = 'http://maps.google.com/maps/api/staticmap?center=' + center + '&zoom=13&size=80x80&maptype=roadmap&format=png&path=color:0x0000ff|weight:5';
  for(i=0; i<pntCnt; i++)
  {
    latlngs[i] = new GLatLng(pnts[idx], pnts[idx+1], true);
    img += '|' + pnts[idx] + ',' + pnts[idx+1];
    idx = idx + 2;
  }  
  img += '&sensor=false&key=ABQIAAAA9k26g8XMhjW26puIcLupsBRBbvhE4ZnyWZrWL-s_bP6LnlCf_xS0mtQsuv4_V89DnPAqoqRqdCCiTQ';
  return '<a href="walks.php?id=' + id + '">' + '<img src="' + img + '" onmouseover="Tip(\'' +title+ '\')" onmouseout="UnTip()"/></a>';
}

window.onload = init
window.onunload = GUnload
